<template>
  <div>
    <h1>Header -- {{count}}</h1>
    <h2>{{price}}</h2>
    <button @click="increment">累加</button>
    <button @click="decrement(1)">累减</button>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
    name:'Header',
    computed:{
        // count(){
        //    return this.$store.state.count
        // }
        // ...mapState的数组写法，直接把store的state的数据名称作为计算属性的名称
        ...mapState(['count','price'])
    },
    methods:{
        increment(){
            this.$store.commit('increment')
        },
        decrement(n){
          this.$store.commit('decrement',{n})
        }
    }
}
</script>

<style>

</style>